
<style type="text/css">
	.box {
		width: 900px;
		height: 700px;
		background: #fff;
		margin: 0px;
		box-shadow: 0px 0px 5px #000;
		border-radius: 10px;
		/*display:none;*/
	}
	
	.box .header {
		height: 60px;
		background: red;
		border-radius: 5px;
		position: relative;
	}
	.pl-content {
		height: 500px;
		background: #fff;
		padding: 10px;
		overflow: auto;
	}
	
	.send {
		height: 120px;
	}
	
	#sendContent {
		width: 900px;
		height: 70px;
		border: none;
		border-top: 1px solid #82CEFF;
		outline: medium;
	}
	
	.bottom {
		height: 50px;
		cursor: pointer;
	}
	
	button {
		float: right;
		margin-right: 20px;
		width: 100px;
		height: 32px;
		font-size: 17px;
		background: #0066ff;
		border-radius: 5px;
		border: none;
		color: #fff;
		cursor: pointer;
		box-shadow: 0px 0px 5px #000;
	}
	
	button:hover {
		box-shadow: 0px 0px 10px 3px #000;
	}
	
	.left {
		width: 100%;
		color: #ff6600;
	}
	
	.left img {
		border-radius: 50%;
	}
	
	.right {
		float: right;
		text-align: right;
		width: 100%;
	}
	
	.right img {
		border-radius: 50%;
	}
	.msg{
		width: 100%;
	}
</style>

</head>

<body>
	<div class="main-wrap">
		<!--标题 -->
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">商品咨询</strong> / <small>Commodity&nbsp;Consultation</small></div>
		</div>
		<hr/>
		<div class="box">
			<div class="header">
				
			</div>
			<div class='pl-content'>
				<div class='left'>
					<img width='50px' height='50px' src='../images/商城客服.png' />
					<span class='msg'>你好，有什么可以为你效劳?</span>
				</div>
				<div class='right'>
					<span class='msg'></span>
					<img width='50' height='50' src='../images/头像.png' />
				</div>

			</div>
			<div class="send">
				<input type="text" id="sendContent" placeholder="亲,请描述你的问题……" />
				<div class="bottom">
					<button>发送</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(".bottom").click(function() {
		var conten = $("#sendContent").val();
		$("#sendContent").val("");
		var html = "<div class='right'><span class='msg'>" + conten + "</span><img width='50' height='50' src='../images/头像.png'/></div>";
		$(".pl-content").append(html);
	})

	function WebSocketTest() {
		if("WebSocket" in window) {
			alert("您的浏览器支持 WebSocket!");

			// 打开一个 web socket
			var ws = new WebSocket("ws://localhost:80/java-shop/chat");
			
			ws.onopen = function() {
				// Web Socket 已连接上，使用 send() 方法发送数据
				var cont=$("#sendContent").val();
				ws.send(cont);
				alert("数据发送中...");
			};

			ws.onmessage = function(evt) {
				var received_msg = evt.data;
				alert("数据已接收...");
			};

			ws.onclose = function() {
				// 关闭 websocket
				alert("连接已关闭...");
			};
		} else {
			// 浏览器不支持 WebSocket
			alert("您的浏览器不支持 WebSocket!");
		}
	}
</script>